<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
  
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<!-- JqueryUI -->
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- Awesome font icons -->
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" media="screen">
<!-- Owlcoursel -->
<link rel="stylesheet" type="text/css" href="css/owl-coursel/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="css/owl-coursel/owl.transitions.css">
<!-- Magnific-popup -->
<link rel="stylesheet" type="text/css" href="css/magnific-popup/magnific-popup.css">
<!-- Style -->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
<!-- Fw -->
<link rel="stylesheet" type="text/css" href="css/fw.css" media="screen">
</head>
<body class="bg-m">

 <input id="pagePath" type="hidden" value="${pageContext.request.contextPath}"/>
 <input id="currentMerchantName" type="hidden" value="${currentMerchantName}" />
 <input id="current_customer_orderItems" type="hidden" value="${orderItems}" />

 
<div class="preloader">
	<i class="fa fa-spinner"></i>
</div>
<header>
	<div class="container">
		<div class="row top-header">
			<div class="col-sm-3 text-left">
				<a href="#" class="logo">
					<img src="images/logo.png" alt="logo">
				</a>
			</div>				
			<div class="col-sm-9">
				<ul class="top-link pull-right">
					
					<li class="dropdown hidden-xs">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1" aria-haspopup="true" aria-expanded="false">My Account <span class="caret"></span></a>
						<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
							<li><a href="login.jsp">Login</a></li>
							<li><a href="register.jsp">Register</a></li>
							<li><a href="logout">Log out</a></li>
						</ul>
					</li>


					<li id="header_of_shopping_cart" class="pull-right"  >
						<div id="shopping_cart_position" class="cart dropdown">						
							<a href="#" class="cart-item dropdown-toggle" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<span>2</span><i class="fa fa-cart-plus"></i>
							</a>	
							<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
								
								<!-- 至此添加购物车条目信息 -->
								<div id="shopping_cart_list">
									
								</div>
								<!-- 至此结束购物车条目信息 -->								
								
								<li>
									<p>
										<a id="shopping_cart_checkout" href="${pageContext.request.contextPath}/orderInfo" class="btn ht-btn bg-3">Checkout</a>
										<a href="#" class="btn ht-btn bg-6">Cart</a>
									</p>
								</li>
								<!-- 由此结束购物车结算信息 -->
								
								
							</ul>
						</div>
					</li>






				</ul>
			</div>
		</div>
	</div>
	<div class="container">
		<div class="bg-mn color-inher">
			<div class="row m-0">
				<div class="col-sm-1 col-md-1 col-lg-2 p-0">
					<div class="dropdown category-bar">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">
							<i class="fa fa-bars"></i><span>Categories</span>
						</a>
						
					</div>
				</div>
				<div class="col-sm-8 col-md-8 col-lg-7 p-0">
					<div class="main-menu">
						<nav class="navbar navbar-default menu">
							<div class="navbar-header">
								<button type="button" class="navbar-toggle collapsed m-r-xs-15" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
									<span class="sr-only">Toggle navigation</span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
								</button>
							</div>
							<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
								<ul class="nav navbar-nav"> 
									<li><a href="home">Home</a></li>
									<li><a href="login.jsp">Login</a></li>
									<li><a href="register.jsp">Register</a></li>
								</ul>
							</div>
						</nav>
					</div>
				</div>	
				<div class="col-sm-3 col-md-3 col-lg-3 p-0">
					<div class="search-box m-l-xs-15 m-r-xs-15">
						<input type="text" class="form-item" placeholder="Search...">
						<button type="submit" class="fa fa-search"></button>
					</div>
				</div>
			</div>
		</div>
	</div>
</header>
<!-- Banner -->

<!-- strat -->
	<div id="myCarousel" class="carousel slide" style="margin-left:20%; margin-right:20%; margin-top:2%">
    <!-- 轮播（Carousel）指标 -->
    <ol class="carousel-indicators">
    <!-- 
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
         -->
      
        <c:forEach items="${advertisementVOs}" varStatus="status">
        	<c:if test="${status.index ==0 }">
        		<li data-target="#myCarousel" data-slide-to="${status.index}" class="active"></li>
        	</c:if>
        	<c:if test="${status.index > 0}">
        		<li data-target="#myCarousel" data-slide-to="${status.index}"></li>
        	</c:if>
        	
        </c:forEach>
        
        
        
    </ol>   
    <!-- 轮播（Carousel）项目 -->
    <div class="carousel-inner">
    	<!--  -->
    	<c:forEach items="${advertisementVOs}" var="advertisementVO" varStatus="status" >
    		<c:if test="${status.index == 0}">
    			<div class="item active">
            		<img src=${advertisementVO.foodImg } alt="First slide" style="width: 100%;height: 300px;">
            		<div class="carousel-caption">热门</div>
        		</div>
    		</c:if>
    		<c:if test="${status.index > 0}">
    			<div class="item">
            		<img src=${advertisementVO.foodImg } alt="Second slide" style="width: 100%;height: 300px;">
           			<div class="carousel-caption">标题 2</div>
      	 		 </div>
    		</c:if>
    		
    	</c:forEach>
    	
    
    <!-- 轮播（Carousel）导航 -->
    <a class="carousel-control left" href="#myCarousel" 
        data-slide="prev" style="background-color: #BCEE68;
    background-repeat: repeat-x;
    width: 10%;
    padding-top: 13%;">&lsaquo;
    </a>
    <a class="carousel-control right" href="#myCarousel" 
        data-slide="next" style="background-color: #BCEE68;
    background-repeat: repeat-x;
    width: 10%;
    padding-top: 13%;">&rsaquo;
    </a>
</div>
	
	<!-- end -->


<!-- Product tabs -->
<div>
	<div class="container text-center m-t-30">
		<h3 class="title f-30">Our Product</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>	
		<div class="ht-tabs ht-tabs-product text-center">
			<!-- Nav tabs -->
			<ul class="nav nav-tabs m-b-20" role="tablist">
			<!-- AllFoodTypes 食品信息 -->
			<li role="presentation" class="active">
					<a href="show" aria-controls="tab-description" role="tab" data-toggle="tab">
						<p><img src="images/foodtype/all.jpg" alt="image"></p> 所有</a>
				</li>
			<c:forEach items="${AllFoodTypes }" var="foodType">
				<li role="presentation" class="active">
					<a href="#tab-description" aria-controls="tab-description" role="tab" data-toggle="tab">
						<p><img src="images/foodtype/${foodType.typeName }.jpg"+ alt="image"></p> ${foodType.typeName }</a>
				</li>
			</c:forEach>
			
			</ul>
			<!-- Tab panes -->
			<div class="tab-content">
				<div role="tabpanel" class="tab-pane active" id="tab-description">
					
					
					<!-- 在这里添加商家信息  -->
					<div class="row" id="merchantsInfo">
						<c:forEach items="${merchants }" var="merchant">
							<!-- 商家1 -->
							<div class="col-sm-6 col-md-4 col-lg-3">
								<!-- Product item -->
								<div class="product-item">
									<!-- 替换超链接 -->
									<a href="${merchant.username }/foods">
										<img src=${merchant.portrait } alt="商家头像无法显示哦" /> <!-- 放图片 -->
									</a>
									<div class="product-caption">
										<h4 class="product-name">
											<a href=>${merchant.username }</a>
										</h4>
										<div class="product-price-group">
											<span class="product-price"></span>
										</div>
										<div class="ht-btn-group">
											<a href="#" class="wishlist_btn"><i class="fa fa-heart-o"></i></a> <!-- 用于后期拓展 -->
											<input type="hidden" value=${merchant.username } > </input>
											<button name="current_merchant_name" >${merchant.address }</a>
											<%-- <a href="${merchant.username }/foods">${merchant.address }</a> --%>
											<a href="#" class="compare_btn"><i class="fa fa-exchange"></i></a>
										</div>
									</div>
								</div>
							</div>
							
						
						
						
						</c:forEach>
					
						
					
						
					</div>
				</div>
				<div role="tabpanel" class="tab-pane" id="tab-review">
				............
				</div>
			</div>
		</div>
	</div>
</div>


<!-- jQuery -->
<script src="js/jquery/jquery-2.2.4.min.js"></script>
<!-- JqueryUI -->
<script src="js/jquery/jquery-ui.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap/bootstrap.min.js"></script>
<!-- Owl-coursel -->
<script src="js/owl-coursel/owl.carousel.js"></script>
<!-- Magnific-popup -->
<script src="js/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Script -->
<script src="js/script.js"></script>
<script src="${pageContext.request.contextPath}/js/home.js"></script>
</body>
</html>